<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图回显</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--<link rel="stylesheet" type="text/css" href="css/css.css">-->
</head>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    html,body{
        width: 100vw;
        height: 100%;
    }
    #container{
        width: 100vw;
        height: 100%;
    }
</style>

<body>
    <div id='container'></div>
</body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e7e2ae624db5406ff49d6e5d8e4e3c7a"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, // 开启地图窗口大小自适应
    });
</script>
<script>
    //收到后端给的经纬度信息
    //WebSocket
    var socket = new WebSocket("wss://xyh.shijiayi.top/websocket/location");
    //四种状态
    socket.onopen = function () {
        console.log("连接成功");
    };
    socket.onmessage = function (event) {
        var data = JSON.parse(event.data);
        console.log(data);
        //设置经纬度
        map.setCenter(new AMap.LngLat(data.longitude, data.latitude));
        //设置显示图标
        var marker = new AMap.Marker({
            position: new AMap.LngLat(data.longitude, data.latitude),
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: data.angle
        });
        marker.setMap(map);
        /*map.setFitView();*/

    }
    socket.onclose = function () {
        console.log("连接关闭");
    };
    socket.onerror = function () {
    }
</script>
</html>